<template>
	<view style="background-color: #f7f8fa; height: 100vh;">
		<view class="container">
			<view class="h2">
				选择颜色
			</view>
			<view class="palettes">
				<view class="van "   @click="changeColor">
					<view class="van-title">
						<span>粉色系列</span>
						<view class="cell" >
							<view class="color">
								<view  class="color-item" style="background: rgb(255, 81, 121);"></view>
								<view  class="color-item" style="background:  rgb(255, 230, 232);"></view>
								<view  class="color-item" style="background: rgb(255, 255, 255);"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="van"  @click="changeColor1">
					<view class="van-title">
						<span>黄色系列</span>
						<view class="cell">
							<view class="color">
								<view  class="color-item" style="background: rgb(255, 170, 0);"></view>
								<view  class="color-item" style="background:  rgb(29, 38, 46);"></view>
								<view  class="color-item" style="background:  rgb(255, 255, 255);"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="van">
					<view class="van-title" @click="changeColor2">
						<span>棕色系列</span>
						<view class="cell">
							<view class="color">
								<view  class="color-item" style="background: rgb(195, 167, 105);"></view>
								<view  class="color-item" style="background: rgb(235, 236, 242);"></view>
								<view  class="color-item" style="background: rgb(255, 255, 255);"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="van">
					<view class="van-title" @click="changeColor3">
						<span>黑色系列</span>
						<view class="cell">
							<view class="color">
								<view  class="color-item" style="background: #323233;"></view>
								<view  class="color-item" style="background: rgb(235, 236, 242);"></view>
								<view  class="color-item" style="background: rgb(255, 255, 255);"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="van">
					<view class="van-title" @click="changeColor4">
						<span>蓝色系列</span>
						<view class="cell">
							<view class="color">
								<view  class="color-item" style="background: rgb(0, 128, 255);"></view>
								<view  class="color-item" style=" background: rgb(214, 233, 252);"></view>
								<view  class="color-item" style="background: rgb(255, 255, 255);"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="van">
					<view class="van-title" @click="changeColor5">
						<span>紫色系列</span>
						<view class="cell">
							<view class="color">
								<view  class="color-item" style="background: rgb(136, 76, 255);"></view>
								<view  class="color-item" style=" background: rgb(239, 230, 255);"></view>
								<view  class="color-item" style="background: rgb(255, 255, 255);"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="van">
					<view class="van-title" @click="changeColor6">
						<span>红色系列（Vant 默认主色）</span>
						<view class="cell">
							<view class="color">
								<view  class="color-item" style="background: rgb(238, 10, 36);"></view>
								<view  class="color-item" style=" background: rgb(255, 208, 30);"></view>
								<view  class="color-item" style="background: rgb(255, 255, 255);"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="van">
					<view class="van-title" @click="changeColor7">
						<span>绿色系列（V-shop 默认主色）</span>
						<view class="cell">
							<view class="color">
								<view  class="color-item" style="background: rgb(27, 167, 132);"></view>
								<view  class="color-item" style=" background: rgb(217, 246, 239);"></view>
								<view  class="color-item" style="background: rgb(255, 255, 255);"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		<view class="tips">
			<view class="tips-h2">
				tips:
			</view>
			<view class="tips-h2">
				1. 商品详情页面可查看最佳效果。
			</view>
			<view class="tips-h2">
				2. 只在当前页面生效，如果需要持久化生效，请点击底部按钮【保存】即可。
			</view>
		</view>
		<button :style="{background:bgColor}">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor:"rgb(27, 167, 132)"
			}
		},
		methods: {
			changeColor(){
				this.bgColor = "rgb(255, 81, 121)"
			},
			changeColor1(){
				this.bgColor =" rgb(255, 170, 0)"
			},
			changeColor2(){
				this.bgColor =" rgb(195, 167, 105)"
			},
			changeColor3(){
				this.bgColor = "#323233"
			}
			,
			changeColor4(){
				this.bgColor = "rgb(0, 128, 255)"
			}
			,
			changeColor5(){
				this.bgColor = "rgb(136, 76, 255)"
			}
			,
			changeColor6(){
				this.bgColor = "rgb(238, 10, 36)"
			}
			,
			changeColor7(){
				this.bgColor = "rgb(27, 167, 132)"
			}
		}
	}
</script>

<style scoped lang="scss">
.container{

	.h2{   
		text-align: left;
		    margin-left: 4%;
		    color:#969799;
		    font-weight: 400;
		    font-size: 3.73vw;
		    line-height: 4.27vw;
		
	}
	.palettes{
		margin: 4%;
		    overflow: hidden;
		    border-radius: 2.13vw;
	}
	.van{
		    display: flex;
		    box-sizing: border-box;
		    width: 100%;
		    padding: 2.67vw 4.27vw;
		    overflow: hidden;
		    color: var(--gray-color-8);
		    font-size: 3.73vw;
		    line-height: 6.4vw;
		    background-color: white;
			.cell{
				    margin-top: 1.07%;
				    color: #969799;
				    font-size: 3.2vw;
				    line-height: 4.8vw;
					.color{
						    display: -webkit-inline-box;
						    display: -webkit-inline-flex;
						    display: inline-flex;
						    -webkit-box-align: center;
						    -webkit-align-items: center;
						    align-items: center;
						    border: 1px solid #eee;
							.color-item{
								    width: 4.27vw;
								    height: 4.27vw;
							}
					}
			}
	}
	.tips{
		background-color: #f7f8fa;
		    margin: 4%;
		    margin-bottom: 5.33vw;
		    font-size: 3.2vw;
		    line-height: 4.27vw;
		    color: #969799;
	}
	button{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 4%;
		    color: white;
		    background: rgb(27, 167, 132);
		    border-color: rgb(27, 167, 132);
			width: 80%;
			height: 9.07vw;
			margin-bottom: 4%;
			border-radius: 30rpx;
	
	}
	.color1{
		background-color: rgb(255, 81, 121);
	}
}
</style>
